<script setup lang="ts">
import Message from '../../packages/components/message/index'
import BlockBox from '../BlockBox.vue';
import icons from "earthsdk-icon";

const getColor = () => {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

const copy = (name?: string) => {
    navigator.clipboard.writeText(name ?? '').then(() => {
        Message.success('已成功复制：' + (name ?? ''))
    }, (error) => {
        console.error('Error copying text: ', error);
    });
}
</script>

<template>
    <BlockBox text="默认图标">
        <div style="height: 900px;margin: 10px;overflow-y: auto;">
            <div class="icon-box">
                <div class="icon-item " v-for="(item, index) in icons.components" @dblclick="copy(item.name)"
                    :key="index" title="双击复制">
                    <component :is="item" :style="{ color: getColor() }" />
                    <div style="margin-top: 10px;">
                        {{ `
                        <${item.name} />`
                        }}
                    </div>
                </div>
            </div>
        </div>
    </BlockBox>
</template>

<style scoped>
.icon-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.icon-item {
    user-select: none;
    margin: 40px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.es-icon-loading {
    animation: identifier 1.5s infinite linear;
    color: red
}


@keyframes identifier {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(72deg);
    }

    40% {
        transform: rotate(144deg);
    }

    60% {
        transform: rotate(216deg);
    }

    80% {
        transform: rotate(288deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>
